.rotate {
    width: 100px;
    background-color: #f66;
    transform-origin: 100% 0;
    // animation: name duration timing-function delay iteration-count direction fill-mode;
    // animation定义动画，name 动画名称，duration动画时间，timing-function动画线性，delay延迟时间
    // iteration-count动画执行次数， direction 动画是否往返执行，fill-mode动画停留的位置
    animation: h1rotate 5s infinite;
    // animation-name: ;
    // animation-duration: ;
}

@keyframes h1rotate {

    // // 开始的状态
    // from {
    //     transform: rotate(0);
    // }
    // // 结束的状态
    // to {
    //     transform: rotate(360deg);
    // }


    // 开始的状态
    0% {
        transform: rotate(0);
        background-color: #f66;
    }

    50% {
        transform: rotate(180deg);
        background-color: green;
    }

    // 结束的状态
    100% {
        transform: rotate(360deg);
        background-color: blue;
    }
}



.portal {

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);


    div {
        width: 50%;
        height: 180px;
        background-color: #fff;
        border: 1px solid red;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        h2,
        section {
            text-align: center;
        }

        h2>span {
            color: red;
            float: right;
            padding-right: 20px;
        }

    }
}